<template>
  <div class="fund2">
      <h1>契约基金研究</h1>
        <el-row :gutter="20">
            <el-col :span="8" class="info">
                  <nuxt-link target="_blank" :to="'/post/' + newdata[0].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-07.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[0].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
                <nuxt-link target="_blank" :to="'/post/' + newdata[1].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-09.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[1].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
            </el-col>
            <el-col :span="8" class="info">
                  <nuxt-link target="_blank" :to="'/post/' + newdata[2].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-08.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[2].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
                 <nuxt-link target="_blank" :to="'/post/' + newdata[3].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-10.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[3].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
            </el-col>
            <el-col :span="8" class="info">
                <nuxt-link target="_blank" :to="'/post/' + newdata[4].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-01.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[4].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
               <nuxt-link target="_blank" :to="'/post/' + newdata[5].pid">
                        <div class="infodetail">
                            <img src="http://img3.tqcaifu.com/img/list/img-02.png" alt="天沁财富">
                            <div class="infomsg">
                                <p>{{newdata[5].name}}</p>
                            </div>
                        </div>
                  </nuxt-link>
            </el-col>
        </el-row>
  </div>
</template>

<script>
export default {
  props: {
    newdata:{
      type:Array,
      default:function(){
        return []
      }
    }
  }

};
</script>


<style scoped>
.fund2{
    background: #fff;
    overflow: hidden;
    margin-top: 20px;
}
.fund2 h1{
    font-size: 22px;
    color: #cd9c54;
    text-align: left;
    margin: 20px 0;
    padding-left: 20px;
}
.infodetail{
    position: relative;
    margin: 10px auto;
    width: 366px;
    height: 140px;
    overflow: hidden;
}
.infodetail img{
    width: 100%;
    height: 100%;
   transition: all 0.5s;
}
.infodetail:hover img{
    transform: scale(1.4);
}

.infomsg{
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    top: 0;
    left: 0;
    color: white;
}
.infomsg p{
    color: white;
    width: 330px;
    overflow: hidden;
    margin: 110px 0 0 20px;
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

